<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     div{
         text-align: center;
         margin-top: 100px;
     }
     #clock{
         border: 1px solid #333;
     }
    </style>
</head>
<body>
    <div >
        <canvas id="clock" height="500" width="500"></canvas> 
    </div>

    <script type = 'text/javascript'>
        const canvas = document.getElementById('clock');
        const ctx = canvas.getContext('2d');
        const width = ctx.canvas.width;
        const height = ctx.canvas.height;
        ctx.lineWidth = 1;
        const r = width / 2;
        ctx.translate(r, r);
        let num =  360;
        let radian = Math.PI;
        let radianDecrement = Math.PI / num * 2;
        let timer;
        var i = 0;


            
        

        function drawHeart(){
            ctx.strokeStyle = 'red';
            ctx.moveTo(getX(radian), getY(radian));
            timer = setInterval("printHeart()", 10);
        }

        function printHeart(){
            radian += radianDecrement;
            ctx.lineTo(getX(radian),getY(radian));
            ctx.fill();
            i++;
            if(i >= num){
                clearInterval(timer);
                console.log('已清除');
            }
        }

        
        function getX(t){
            return  2 * (16 * Math.pow(Math.sin(t),3));
        }
        function getY(t){
            return  - 2 * (13 * Math.cos(t) - 5 * Math.cos(2*t) -2 * Math.cos(3 * t) - Math.cos( 4 * t))
        } 

        function showTime(){
            var now = new Date();
            var time = now / 1000;
            var sec =Math.floor(time%(24*60*60)%(60*60)%60)
            if(sec == 0){
                drawHeart();
            }
            console.log(sec);
        }

    

        // showTime();
        // setInterval(showTime,1000);
    </script>
</body>
</html>